<template>
  <div>
    <el-dialog
      title="关联属性"
      :close-on-click-modal="false"
      :visible.sync="associationVisible"
      width="30%"
    >
      <el-button
        class="addButton"
        @click="handleAdd"
        icon="el-icon-circle-plus"
      ></el-button>
      <el-table
        :data="attrAttrgroupIdRelation"
        :stripe="true"
        :highlight-current-row="true"
        tooltip-effect="dark"
        class="brandTable"
      >
        <el-table-column
          type="selection"
          width="55"
        >
        </el-table-column>
        <el-table-column
          label="id"
          width="50"
        >
          <template slot-scope="scope">{{ scope.row.attrId }}</template>
        </el-table-column>
        <el-table-column
          prop="attrName"
          label="属性名"
          width="150"
        >
        </el-table-column>
        <el-table-column
          prop="valueSelect"
          label="可选值"
          width="180"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            ><i class="el-icon-delete"></i></el-button>
          </template>
        </el-table-column>
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="associationVisible = false">关闭</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="添加属性关系"
      :close-on-click-modal="false"
      :visible.sync="attrgroupVisible"
      width="28%"
    >
      <el-input
        v-model="input"
        placeholder="请输入查询参数"
        class="searchInput"
      ></el-input>
      <el-button
        icon="el-icon-search"
        style="font-size: 16px;"
        @click="handleSearch"
      ></el-button>
      <el-table
        ref="baseattr"
        :data="baseattr"
        :stripe="true"
        :highlight-current-row="true"
        @selection-change="baseattrSelectionChange"
        tooltip-effect="dark"
        class="brandTable"
      >
        <el-table-column
          type="selection"
          width="50"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="属性id"
          width="80"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.attrId }}</template>
        </el-table-column>
        <el-table-column
          prop="attrName"
          label="属性名"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="attrType"
          label="属性类型"
          width="100"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.attrType==0">销售属性</el-tag>
            <el-tag
              type="success"
              v-if="scope.row.attrType==1"
            >基本属性</el-tag>
            <el-tag
              type="info"
              v-if="scope.row.attrType==2"
            >销售&基本</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="enable"
          label="启用状态"
          width="100"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-tag
              type="info"
              v-if="scope.row.enable==0"
            >禁用</el-tag>
            <el-tag
              type="success"
              v-if="scope.row.enable==1"
            >启用</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[5, 10, 20, 40]"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="attrgroupVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="hadleAttrGroupAssociation"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      associationVisible: false, // 控制关联属性对话框是否显示
      attrgroupVisible: false, // 控制添加属性对话框是否显示
      attrAttrgroupIdRelation: [], // 分类、品牌关联数据
      attrgroupId: '', // 保存属性分组 id
      input: '',
      baseattr: [], // 保存未关联属性
      currentPage: 1,
      pageSize: 5,
      total: 0,
      multipleSelection: [] // 保存勾选数据
    }
  },
  methods: {
    // 点击关联按钮触发的对话框
    init (index, row) {
      this.associationVisible = true
      this.attrgroupId = row.attrGroupId
      this.getAttrgroupRelationByAttrgroupId()
    },
    // 添加事件
    handleAdd () {
      this.attrgroupVisible = true
      this.getNoRelation(this.pageSize, this.currentPage)
    },
    // 删除事件
    handleDelete (index, row) {
      let ids = [row.id]
      this.$confirm(`删除此关联, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/product/attrattrgrouprelation/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getAttrgroupRelationByAttrgroupId()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取属性分组关联关系数据
    getAttrgroupRelationByAttrgroupId () {
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/${this.attrgroupId}/attr/relation`),
        method: 'get'
      }).then(({
        data
      }) => {
        this.attrAttrgroupIdRelation = data.data
      })
    },
    // -------------------------------------------------------------------------------
    // 添加管理属性
    // 选择框
    baseattrSelectionChange (val) {
      this.multipleSelection = val
    },
    // 确定添加关联属性
    hadleAttrGroupAssociation () {
      let attrIds = []
      this.multipleSelection.forEach(item => {
        attrIds.push(item.attrId)
      })
      let relation = { attrIds: attrIds, attrGroupId: this.attrgroupId }
      this.$http({
        url: this.$http.adornUrl('/product/attrattrgrouprelation/save'),
        method: 'post',
        data: this.$http.adornData(relation, false)
      }).then(({
        data
      }) => {
        this.$message({
          type: 'success',
          message: '属性关联保存成功!'
        })
        this.attrgroupVisible = false // 关闭对话框
        this.getNoRelation(this.pageSize, this.currentPage) // 刷新数据
        this.getAttrgroupRelationByAttrgroupId()
      })
    },
    // 查询
    handleSearch () {
      this.getNoRelation(this.pageSize, this.currentPage, this.input)
    },

    // 分页
    handleSizeChange (size) {
      this.pageSize = size
      this.getNoRelation(this.pageSize, this.currentPage)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getNoRelation(this.pageSize, this.currentPage)
    },
    getNoRelation (size, page, input) {
      this.$http({
        url: this.$http.adornUrl(`/product/attrgroup/${this.attrgroupId}/noattr/relation`),
        method: 'get',
        params: this.$http.adornParams({
          page: size,
          limit: page,
          input: input
        })
      }).then(({
        data
      }) => {
        this.total = data.data.total
        this.baseattr = data.data.records
      })
    }
  },
  created () {

  }
}
</script>
<style>
.searchInput {
  width: 35%;
  margin-right: 10px;
}
.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}
.brandTable {
  width: 100%;
  margin-top: 15px;
}
</style>